<template>
  <div class="loginWarp">
    <div class="form">
      <h2>LOGIN</h2>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="Username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="Password"
            @keyup.enter="userLogin"
          ></el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="userLogin">登录</el-button>
        </el-form-item>
      </el-form>
      <!-- <p class="options">
        Not Registered?
        <a href="#">Create an Account</a>
      </p> -->
    </div>
  </div>
</template>

<script>
import { inject, reactive, ref } from "vue";
export default {
  setup() {
    const appCtx = inject("appCtx");
    // console.log("appCtx", appCtx);
    const loginForm = reactive({
      username: "admin",
      password: "123456"
    });
    // 表单验证
    const loginFormRules = {
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        },
        {
          min: 2,
          max: 16,
          message: "长度在 2 到 16 个字符",
          trigger: "blur"
        }
      ],
      password: [
        {
          required: true,
          message: "请输入用户密码",
          trigger: "blur"
        },
        {
          min: 6,
          max: 18,
          message: "长度在 6 到 18 个字符",
          trigger: "blur"
        }
      ]
    };
    const loginFormRef = ref(null);
    const userLogin = () => {
      loginFormRef.value.validate(valid => {
        if (!valid) return false;
        // const loading = appCtx.$loading({
        //   lock: true,
        //   text: "正在登录...",
        //   background: "rgba(0, 0, 0, 0.7)",
        // });
        console.log(appCtx);

        appCtx.$store
          .dispatch("User/login", loginForm)
          .then(res => {
            console.log("1111", res);
            appCtx.$router.push(appCtx.$route.query.redirect || "/");
          })
          .catch(err => {
            // loading.close();
            console.log(err);
          });
        // appCtx.$api.user
        //   .login(loginForm)
        //   .then((res) => {
        //     if (res.data.token) {
        //       appCtx.$store.commit("user/setToken", res.data.token);
        //       appCtx.$router.push(appCtx.$route.query.redirect || "/");
        //     }
        //     loading.close();
        //     appCtx.$message.success("登录成功");
        //   })
        //   .catch((err) => {
        //     loading.close();
        //     console.log(err);
        //   });
      });
    };

    return {
      loginFormRef,
      loginForm,
      loginFormRules,
      userLogin
    };
  }
};
</script>

<style lang="scss" scoped>
.loginWarp {
  height: 100%;
  background: #417386;

  .form {
    background-color: #000;
    z-index: 1;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    padding: 0 45px 30px 45px;
    text-align: center;
    border-radius: 10px;
    opacity: 0.8;

    h2 {
      color: #fff;
      font-size: 28px;
      font-weight: 500;
      text-align: center;
      //   text-transform: uppercase;
      margin: 23px;
    }

    button {
      outline: 0;
      color: #fff;
      background: none;
      font-size: 14px;
      text-transform: uppercase;
      width: 150px;
      padding: 15px;
      border: 2.5px solid #10ac84;
      border-radius: 25px;
      cursor: pointer;
      transition: 0.5s;
      transition-property: background, transform;

      &:hover,
      &:active,
      &:focus {
        background: #10ac84;
        transform: scale(1.1);
      }
    }

    .options {
      color: #bbb;
      font-size: 14px;
      margin: 20px 0 0;

      a {
        text-decoration: none;
        color: #06c5cf;
      }
    }
  }
}
</style>
